<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> 
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>  
<%@ taglib uri="/struts-tags" prefix="s"%> 
<%@ page import="com.onlineMIS.ORM.entity.headQ.inventory.*"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">
<meta http-equiv="expires" content="0"> 
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<%@ include file="../../common/StyleEUIMobile.jsp"%>
<script>
//待配状态
var wait = <%=InventoryOrder.STATUS_PDA_COMPLETE%>;
//正在配货中状态
var progress = <%=InventoryOrder.STATUS_PEIHUO_INPROCESS%>;
//配货完成
var complete = <%=InventoryOrder.STATUS_PEIHUO_COMPLETE%>;
var dataGrid;
var autoRefresher = null;
var baseUrl = "<%=request.getContextPath()%>";

$(document).ready(function(){
	  $('#tabs').tabs('select', 1);
	  dataGrid = $('#alreadDataGrid').datagrid({
	
		url : 'ipadJSON!listPdaAlreadOrders',
		queryParams: null,
		fitColumns: true,
		border : false,	
		singleSelect:true,
		rownumbers : true,
		nowrap : false,
		striped: true,
		columns : [ [
			{	
				field : 'statusS',
				title : '状态',
				width : '7%',
				align: 'center',
				formatter : function(value, row, index) {
					var str = "";					
					if(row.status == complete){
						var str = "<img border='0' src='<%=request.getContextPath()%>/conf_files/easyUI/themes/icons/complete2.png' />";
					}						
				    	return str;
				}
			},{
				field : 'id',
				title : '单据号',			
				width : '15%',
				align: 'center'
				
			},{	
				field : 'orderStartDateS',
				title : '日期',			
				width : '15%',
				align: 'center'
			},{						
				field : 'custName',
				title : '客户',
				width : '23%',
				formatter: function(value) {
					  return '<div class="datagrid-cell" title="' + value + '">' + value + '</div>';
          }
			},{					
				field : 'distributionUser',
				title : '配货人',
				width : '12%',	
				align: 'center'
			},{					
				field : 'snums',
				title : '选货',
				width : '8%',	
				align: 'center'
			},{	
				field : 'progress',
				title : '配货率',
				width : '10%',
				formatter: function (v, r, i) {	
					var htmlstr = "";
					if(v <= 60){
						 htmlstr = '<div class="easyui-progressbar progressbar easyui-fluid" style="width: 100%; height: 20px;">'
							  + '<div class="progressbar-value" style="width: '+v+'%; height: 20px; line-height: 20px; background-color:#FFC0CB;"> '
							  + '<div class="progressbar-text" style="width: ' + v+'%'+ '; height: 20px; line-height: 20px;background-color:#FFC0CB;">' + v+ '%</div>'
							  + '</div>'
							  + '</div>';
							  return htmlstr;	
					}else if(v<100 && v>60){
						 htmlstr = '<div class="easyui-progressbar progressbar easyui-fluid" style="width: 100%; height: 20px;">'
							  + '<div class="progressbar-value" style="width: '+v+'%; height: 20px; line-height: 20px; background-color:#FFDAB9;"> '
							  + '<div class="progressbar-text" style="width: ' + v+'%'+ '; height: 20px; line-height: 20px;background-color:#FFDAB9;">' + v+ '%</div>'
							  + '</div>'
							  + '</div>';
							  return htmlstr;	
					}else if(v==100){
						htmlstr = '<div class="easyui-progressbar progressbar easyui-fluid" style="width: 100%; height: 20px;">'
							  + '<div class="progressbar-value" style="width: '+v+'%; height: 20px; line-height: 20px; background-color:#90EE90;"> '
							  + '<div class="progressbar-text" style="width: ' + v+'%'+ '; height: 20px; line-height: 20px;background-color:#90EE90;">' + v+ '%</div>'
							  + '</div>'
							  + '</div>';
							  return htmlstr;	
							}					 
					 }
			}, {				
				field : 'action',
				title : '详情',
				width : '10%',
				align: 'center',
			    formatter : function(value, row, index) {
					var str = $.formatString('<a href="#" onclick="enterAlreadDetails(\'{0}\',\'{1}\');"><img border="0" src="{2}" title="配货"/></a>', row.id,index,'<%=request.getContextPath()%>/conf_files/easyUI/themes/icons/details.png');

			    	return str;
			}
		}]],
		onLoadSuccess: function() {
	        $('.datagrid-cell').tooltip({
	            position: 'bottom',
	            hideDelay: 200,
	            onShow: function() {
	                $(this).tooltip('tip').css('max-width', '500px'); // 自定义宽度
	                var tooltip = $(this); // 获取当前Tooltip实例
	                tooltip.data('timeoutId', setTimeout(function() {
	                  tooltip.tooltip('hide'); // 执行隐藏操作
	                }, 3000)); // 设置3秒后隐藏
	            },
	            onHide: function() { // 隐藏时清理定时器
	                clearTimeout($(this).data('timeoutId'));
	              }
	        });
	    },
	    onDblClickRow: function(index, row) {
	    	enterAlreadDetails(row.id);		    			    
	    }
	});
	  autoRefresher = setInterval("dataGrid.datagrid('reload')", 1000*30);
})

/**
 * 查询单据详情
 */
function enterAlreadDetails(orderId){	
	window.location.href = '<%=request.getContextPath()%>/actionIpad/hqIpadJSP!loadPeihuoOrder?formBean.orderId='+orderId;
}

</script> 
</head>
<body>
	<div class="easyui-navpanel">
		<header>
			<div class="m-toolbar">
				<div class="m-left">
					<a href="javascript:void(0)" class="easyui-linkbutton"
						data-options="iconCls:'icon-man',plain:true"><span>总部人员：<s:property
								value="formBean.userInfor.user_name" /></span></a>
				</div>
				<div class="m-right">
					<a onclick="loginOut();" href="javascript:void(0);"
						class="easyui-linkbutton m-back" plain="true" outline="true"><span>退出登录</span></a>

				</div>
			</div>
		</header>

		<div id="center" style="position: relative; top: 100px;">
			<div>
				<div class="easyui-resizable"
					data-options="minWidth:50,minHeight:50"
					style="position: absolute; bottom: 10px; left: 5%; width: 100px; height: 80px; border: 1px solid #ccc; border-radius: 15px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
					<div style="padding: 20px; text-align: center;">
						<strong>客户数量<br> <span
							style="font-size: 20px; color: #FFA500;"><s:property
									value="formBean.completeCusts" /></span></strong>
					</div>
				</div>

				<div class="easyui-resizable"
					data-options="minWidth:50,minHeight:50"
					style="position: absolute; left: 25%; bottom: 10px; width: 100px; height: 80px; border: 1px solid #ccc; border-radius: 15px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
					<div style="padding: 20px; text-align: center;">
						<strong>已配单据<br> <span
							style="font-size: 20px; color: #87CEFA;"><s:property
									value="formBean.completeOrders" /></span></strong>
					</div>
				</div>
				
				<div class="easyui-resizable"
					data-options="minWidth:50,minHeight:50"
					style="position: absolute; left: 45%; bottom: 10px; width: 100px; height: 80px; border: 1px solid #ccc; border-radius: 15px; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);">
					<div style="padding: 20px; text-align: center;">
						<strong>已配数量<br>
						<span style="font-size: 20px; color: #F08080;"><s:property
									value="formBean.nums" /></span></strong>
					</div>
				</div>
			</div>

			<div
				style="position: fixed; top: 160px; width: 100%; overflow: auto;">
				<hr>
				<span style="position: relative; top: -5px;">已配单据：<img border='0' src='<%=request.getContextPath()%>/conf_files/easyUI/themes/icons/complete2.png' />配货完成</span>
				<table id="alreadDataGrid" class="easyui-datagrid"
					style="width: 100%; height: 720px;">
				</table>
			</div>

		</div>

		<%@ include file="../component/foot/Foot.jsp"%>

	</div>
</body>
</html>



